<template>
    <div class="spaceAnalysis_pop">
        <img src="@/assets/map/icon-guide.png" class="icons" alt="">
        <div class="contents">
            <div class="title">{{item.cityName}}</div>
            <div class="rates">
                <div class="rate_box">优秀 {{item.youXiuRate}}</div>
                <div class="rate_box">良好 {{item.liangHaoRate}}</div>
                <div class="rate_box">一般 {{item.yiBanRate}}</div>
                <div class="rate_box">预警 {{item.yuJingRate}}</div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    props:{
        item :{
            type: Object ,
            default: {}
        }
    },
}
</script>

<style lang="scss" scoped>
.spaceAnalysis_pop{
    display: flex;
    position: absolute;

    .icons{
        width: 100px;
    }
    .contents{
        background-color: rgba(18,46,72,0.90);
        border: dashed 1rem rgba(10,204,204,0.7);
        padding: 10px;
        font-size: 14px;
        position: absolute;
        left: 100px;
        top: 37px;

        .rates{
            width: 180px;
            display: flex;
            flex-wrap: wrap;

            .rate_box{
                width: 50%;
                
            }
        }
    }
}
</style>